<template>
	<!-- 搜索框 -->
	<view class="diy-search">
		<form @submit="onTargetSearch">
			<button formType="submit" class="btn-normal">
				<view :class="'inner ' + itemStyle.searchStyle">
					<view class="search-input" :style="{ 'text-align': itemStyle.textAlign }">
						<text class="search-icon suifont sui-sousuo"></text>
						<text>{{ params.placeholder }}</text>
					</view>
				</view>
			</button>
		</form>
	</view>
</template>

<script>
export default {
	props: { itemIndex: String, itemStyle: Object, params: Object },
	data() {
		return {};
	},
	methods: {
		/**
		 * 跳转到搜索页面
		 */
		onTargetSearch(e) {
			this.navigateTo({ url: '/pageShop/search/index' });
		}
	}
};
</script>

<style>
/* 搜索框 */

.diy-search {
	background: #f1f1f2;
	padding: 20rpx 20rpx;
	font-size: 26rpx;
}

.diy-search .inner {
	height: 60rpx;
	background: #fff;
	overflow: hidden;
}

.diy-search .inner.radius {
	border-radius: 10rpx;
}

.diy-search .inner.round {
	border-radius: 60rpx;
}

.diy-search .inner .search-input {
	height: 60rpx;
	/* width: 100%; */
	line-height: 60rpx;
	color: #999;
	padding: 0 20rpx;
}
</style>
